<template>
  <view class="payment-container">
    <!-- 顶部信息栏 -->
    <view class="header">
      <text class="title">支付收银台</text>
      <text class="store-name">{{ storeName }}</text>
      <text class="amount">￥{{ totalAmount.toFixed(2) }}</text>
      <view class="time-left">
        <text>剩余支付时间: {{ timeLeft }}</text>
      </view>
    </view>
    <!-- 支付方式选择区域 -->
    <view class="payment-methods">
      <view class="method-item" v-for="(method, index) in paymentMethods" :key="index" @click="selectPaymentMethod(index)">
        <image :src="method.icon" class="method-icon"></image>
        <text class="method-name">{{ method.name }}</text>
        <radio :value="index.toString()" :checked="selectedMethod === index"></radio>
      </view>
    </view>
    <!-- 按钮区域 -->
    <view class="button-container">
      <button class="pay-button" @click="goToPay">立即支付 {{ totalAmount.toFixed(2) }}元</button>
      <button class="cancel-button" @click="cancelPay">取消支付</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      storeName: '', // 从购物车获取的超市名称
      totalAmount: 0, // 从购物车获取的总金额
      timeLeft: '29:55',
      paymentMethods: [
        {
          icon: '/static/微信.jpg', // 微信支付图标
          name: '微信支付'
        },
        {
          icon: '/static/支付宝.png', // 银联支付图标
          name: '支付宝支付'
        }
      ],
      selectedMethod: 0,
      isPaying: false // 用于判断是否正在支付中
    };
  },
  onLoad(options) {
    // 从URL参数获取超市名称和总金额
    if (options.storeName && options.totalAmount) {
      this.storeName = decodeURIComponent(options.storeName);
      this.totalAmount = parseFloat(options.totalAmount);
    } else {
      // 如果没有传递参数，尝试从本地存储获取
      const cartInfo = uni.getStorageSync('cartItems'); // 这里修改为 cartItems
      if (cartInfo) {
        this.storeName = cartInfo.length > 0? cartInfo[0].shopName || '' : '';
        this.totalAmount = this.calculateTotalAmount(cartInfo);
      }
    }

    // 开始倒计时
    this.startCountdown();
  },
  methods: {
    calculateTotalAmount(cartItems) {
      return cartItems.reduce((total, item) => {
        return total + item.price * item.quantity;
      }, 0);
    },
    startCountdown() {
      let minutes = 29;
      let seconds = 55;

      this.timer = setInterval(() => {
        seconds--;
        if (seconds < 0) {
          seconds = 59;
          minutes--;
        }

        if (minutes < 0) {
          clearInterval(this.timer);
          uni.showToast({
            title: '支付超时',
            icon: 'none'
          });
          return;
        }

        this.timeLeft = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      }, 1000);
    },
    selectPaymentMethod(index) {
      this.selectedMethod = index;
    },
    goToPay() {
      if (this.isPaying) return; // 如果正在支付中，阻止重复点击
      this.isPaying = true;
      uni.showToast({
        title: '支付中...',
        icon: 'loading',
        duration: 2000
      });

      // 模拟生成订单，这里可以添加实际生成订单的逻辑，比如调用后端接口
      const cartInfo = uni.getStorageSync('cartItems'); // 这里修改为 cartItems
      if (cartInfo) {
        const orderInfo = {
          storeName: this.storeName,
          totalAmount: this.totalAmount,
          products: cartInfo.map(item => ({
            name: item.name,
            specification: item.specification,
            quantity: item.quantity,
            price: item.price
          }))
        };
        // 这里可以将 orderInfo 存储到本地缓存或者发送到后端
        uni.setStorageSync('lastOrderInfo', orderInfo);
      }

      // 清除购物车中的商品数据
      uni.setStorageSync('cartItems', []); // 清空购物车数据

      setTimeout(() => {
        uni.showToast({
          title: '支付成功',
          icon:'success'
        });
        this.isPaying = false;
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/order/index'
          });
        }, 1500);
      }, 3000);
    },
    cancelPay() {
      uni.showToast({
        title: '支付已取消',
        icon: 'none'
      });
    }
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style scoped>
.payment-container {
  background-color: #f9f9f9;
  padding: 20px;
  height: 100vh;
}
.header {
  background-color: #007AFF;
  color: white;
  text-align: center;
  padding: 20px 0;
  border-radius: 10px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.store-name {
  font-size: 16px;
  margin-top: 10px;
  display: block;
}
.amount {
  font-size: 24px;
  margin-top: 10px;
  display: block;
  font-weight: bold;
}
.time-left {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 5px 10px;
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
}
.payment-methods {
  background-color: white;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
}
.method-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  border-bottom: 1px solid #eaeaea;
}
.method-item:last-child {
  border-bottom: none;
}
.method-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.method-name {
  font-size: 16px;
  flex: 1;
}
.button-container {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}
.pay-button {
  background-color: #007AFF;
  color: white;
  padding: 15px;
  border: none;
  border-radius: 30px;
  width: 45%;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 122, 255, 0.2);
}
.cancel-button {
  background-color: #ccc;
  color: white;
  padding: 15px;
  border: none;
  border-radius: 30px;
  width: 45%;
  font-size: 16px;
  font-weight: bold;
}
</style>